﻿<%@ Page EnableEventValidation="false" Language="C#" AutoEventWireup="true" CodeBehind="Process.aspx.cs" Inherits="ImageReview.Process" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Turners Photo Decoding Service - Image Review</title>
    <link type="text/css" rel="Stylesheet" href="Master.css" />
    <link type="text/css" rel="Stylesheet" href="PreviewStyles.css" />
    <link href="Styles/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.lightbox-0.5.js" type="text/javascript"></script>

    <style type="text/css">
    .item-details
    {
        width:150px; 
        height:150px; 
        margin:2px 5px;
        padding-top: 10px;
        float:left;
        background-color: #999999;
    }
    .image-details
    {
        width:120px; 
        height:90px;
        padding-left: 15px;
    }
    .image-title
    {
        font-size: 12px;
        text-align:center;
        line-height:24px;
        padding-left: 30px;
    }
    img, form
    {
        border:0 none;
        margin:0;
        padding:0;
    }
    .imagesList
    {
        float:left;
        height:auto;
        padding:10px; 
        margin-top:20px; 
        width:auto;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table width="100%" class="headingTable" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width:50%; height:58px; text-align:left; vertical-align:top; background-image:url('logo.gif'); background-repeat:no-repeat; background-position: left bottom;">&nbsp;</td>
            <td style="width:50%; text-align:right; vertical-align:middle;" class="pageheading">
                Resolve Conflicts and Review Images</td>
        </tr>
        <tr>
        <td colspan="2" style="width:100%; height:20px" class="separator" align="right">
        <a href="search.aspx" class="customLink1">Search</a> | <a href="Submit.aspx" class="customLink1">Select & Process</a> | <a href="Default.aspx" class="customLink1">Match Good ID </a>| <span class="linklabel">Review Images </span>| <a href="Accept.aspx" class="customLink1">Waiting</a> | <a href="BatchProcess.aspx" class="customLink1">Batch Process</a> &nbsp;
        </td> 
        </tr>        
        </table>
        <br />
        <div class="leftspacing">
            <asp:Label ID="lblUsername" runat="server" Text="Could not find current user." CssClass="desclabel"></asp:Label>
            <asp:Label ID="lblUsername2" runat="server" Text=""></asp:Label>
            <div style="font-weight: bold;">
                <ol>
                    <li>If there are goods with existing images, resolve this by selecting which images to keep and which to discard. You must select an option for every photo for these goods.</li>
                    <li>Review the images for each good.</li>
                    <li>Click on the Process All Images button to complete the process.</li>
                </ol>
            </div>
            <!--<asp:Label ID="Label1" runat="server" Text="Accepted Image Folder: " CssClass="desclabel"></asp:Label>-->
            <asp:Label ID="FolderName" runat="server" Visible="False" Text=" " CssClass=""></asp:Label>
            <br />
            <div style="margin:20px 0;" id="matchimages" runat="server">
            <div style="font-size:18px; line-height:30px; font-weight:bold; ">Step 1: Select which images to use for goods with existing images</div>
            <div>

                <asp:Literal ID="matchedImages" runat='server'></asp:Literal>

                <asp:DataList ID="conflictImagesList" runat="server" 
                    onitemcommand="conflictImagesList_ItemCommand">
                    <HeaderTemplate>
                        <table><tr><td style="width:120px; height:30px;">New Images</td><td style="width:120px; height:30px;">Existing Images</td><td></td></tr></table>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <table><tr><td>
                            <asp:Image ID="imgNewImage" runat="server" Width="120px" Height="80px" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "NewPhotoUrl") %>' /></td><td>
                                <asp:Image ID="imgOriginalImage" runat="server" Width="120px" Height="80px" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "OriginalPhotoUrl") %>' /></td><td>
                                    <asp:Button ID="btnReplace" runat="server" Text="Replace Existing Photo" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"PhotoName") %>' CommandName="Replace" /><br /><br />
                                        <asp:Button ID="btnLeave" runat="server" Text="Keep Existing Photo" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"PhotoName") %>' CommandName="Delete"/></td></tr></table>
                    </ItemTemplate>
                </asp:DataList>

            </div>
            </div>
            <br />
            <div>

            </div>
        </div>
        <div style="padding-top:10px; padding-bottom: 10px; padding-left:10px; font-size:18px; line-height:30px; font-weight: bold;">
            Step 2: Review the final images selection for each good
        </div>
        <div class="imagesList">
            <asp:Literal ID="imagesResults" runat="server"></asp:Literal>

                 <asp:DataList ID="imagesResultsList" runat="server" 
                    RepeatDirection="Horizontal" RepeatLayout="Flow" 
                    onitemcommand="imagesResultsList_ItemCommand">
                    <ItemTemplate>
                        <div class='item-details'>
                            <div class='image-details'>
                            <a href='<%# DataBinder.Eval(Container.DataItem, "PhotoUrl") %>' class='lightbox_images'><img alt="" src='<%# DataBinder.Eval(Container.DataItem, "PhotoThumbUrl") %>' style='width:120px;height:80px;' /></a>
                                        </div>

                                        <span class='image-title' > <asp:Literal Text='<%# DataBinder.Eval(Container.DataItem, "PhotoName") %>' runat="server"></asp:Literal> </span>
                                        <span style="padding-left:15px;">
                                            <asp:Button ID="btnDeletePhoto" runat="server" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"PhotoName") %>' CommandName="Remove" Text="Delete this Photo" />
                                        </span>
                                    </div>
                    </ItemTemplate>
                </asp:DataList>   

        </div>
        
        <div style="padding: 20px; width: 100%; float:left;">
            <asp:Button ID="btnProcess" runat="server" Text="Process All Images" 
                onclick="btnProcess_Click" Font-Bold="True" />
                <br />
                <br />
            <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
        </div>

    </form>
    <script type="text/javascript">
        $(function () {
            $('a.lightbox_images').lightBox();
        });
    </script>
</body>
</html>
